<template>
  <div class="p-2">
    <el-container>
      <el-main>
        <el-row :gutter="24" style="margin-top: 20px;">
          <!-- 表单 -->
          <el-col :span="4">
            <el-card>
              <el-input v-model="querySheetFormParams.name" @keyup.enter="getSheetFormList" placeholder="请输入表单名称(回车查询)" />
              <el-table
                v-loading="loadingSheetFormTree"
                :data="sheetFormList"
                row-key="sheetFormId"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                ref="sheetTableRef"
                :default-expand-all="isExpandAll"
                highlight-current-row
                @row-click="sheetFormRowClick"
              >
                <el-table-column label="表单名称" prop="name" />
              </el-table>
            </el-card>
          </el-col>

          <!-- 设置项 -->
          <el-col :span="20">
            <el-card shadow="never">

              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="字段列表" name="first">
                  <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
                    <div class="search">
                      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                        <el-form-item label="字段名" prop="fieldName">
                          <el-input v-model="queryParams.fieldName" placeholder="请输入字段名" clearable @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item label="简体中文" prop="chineseName">
                          <el-input v-model="queryParams.chineseName" placeholder="请输入简体中文" clearable @keyup.enter="handleQuery" />
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        </el-form-item>
                      </el-form>

                      <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                          <el-button type="primary" plain icon="Plus" @click="handleBatchEdit" v-hasPermi="['system:sheetField:edit']">保存</el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </transition>

                  <el-table v-loading="loading" :data="sheetFieldList" border >
                    <el-table-column label="字段名" align="center" prop="fieldName" />
                    <el-table-column label="简体中文" align="center" prop="chineseName">
                      <template #default="scope">
                        <el-input v-model="scope.row.chineseName" placeholder="请输入简体中文" />
                      </template>
                    </el-table-column>
                    <el-table-column label="字段类型" align="center" prop="fieldType">
                      <template #default="scope">
                        <dict-tag :options="table_field_type" :value="scope.row.fieldType"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="是否启用" align="center" prop="formStatus">
                      <template #default="scope">
                        <el-select v-model="scope.row.formStatus" placeholder="请选择字段是否启用">
                          <el-option
                            v-for="dict in sys_yes_no"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="数据源名称" align="center" prop="dataSourceId">
                      <template #default="scope">
                        <el-select v-model="scope.row.dataSourceId" filterable clearable @change="changeDataSourceId($event,scope.row)" @clear="onClear($event,scope.row)" placeholder="请选择数据源类型">
                          <el-option
                            v-for="item in sheetSourceList"
                            :key="item.sheetSourceId"
                            :label="item.dataSourceName"
                            :value="item.sheetSourceId"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="字段分组" align="center" prop="fieldGroup" >
                      <template #default="scope">
                        <el-input v-model="scope.row.fieldGroup" placeholder="请输入字段分组" />
                      </template>
                    </el-table-column>
                    <el-table-column label="字段提示" align="center" prop="fieldTip" >
                      <template #default="scope">
                        <el-input v-model="scope.row.fieldTip" placeholder="请输入字段提示" />
                      </template>
                    </el-table-column>
                    <el-table-column label="表单排序" align="center" prop="formSort" >
                      <template #default="scope">
                        <el-input-number v-model="scope.row.formSort" placeholder="请输入表单排序" />
                      </template>
                    </el-table-column>
                    <el-table-column label="表单是否显示" align="center" prop="showForm">
                      <template #default="scope">
                        <el-select v-model="scope.row.showForm" placeholder="请选择表单是否显示">
                          <el-option
                            v-for="dict in sys_yes_no"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="展示方式" align="center" prop="showType">
                      <template #default="scope">
                        <el-select v-model="scope.row.showType" placeholder="请选择表单是否显示">
                          <el-option
                            v-for="dict in field_show_type"
                            :key="parseInt(dict.value)"
                            :label="dict.label"
                            :value="parseInt(dict.value)"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                  </el-table>

                  <pagination
                    v-show="total>0"
                    :total="total"
                    v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize"
                    @pagination="getList"
                  />
                </el-tab-pane>

                <el-tab-pane label="表单校验配置" name="second">
                  <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
                    <div class="search" >
                      <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                          <el-button type="primary" plain icon="Plus" @click="handleFormCheckAdd" v-hasPermi="['system:sheetFormCheck:add']">新增</el-button>
                        </el-col>
                        <el-col :span="1.5">
                          <el-button type="success" plain icon="Edit" :disabled="single" @click="handleFormCheckUpdate()" v-hasPermi="['system:sheetFormCheck:edit']">修改</el-button>
                        </el-col>
                        <el-col :span="1.5">
                          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleFormCheckDelete()" v-hasPermi="['system:sheetFormCheck:remove']">删除</el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </transition>
                  <el-table v-loading="loading" :data="sheetFormCheckList" @selection-change="handleFormCheckSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column label="字段中文名称" align="center" prop="sheetFieldName" />
                    <el-table-column label="字段名称" align="center" prop="sheetField" />
                    <el-table-column label="校验类型" align="center" prop="checkType">
                      <template #default="scope">
                        <dict-tag :options="form_check_type" :value="scope.row.checkType"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="错误提示" align="center" prop="errorMsg" />
                    <el-table-column label="最小长度" align="center" prop="minLength" />
                    <el-table-column label="最大长度" align="center" prop="maxLength" />
                    <el-table-column label="正则表达式" align="center" prop="regular" />
                    <el-table-column label="校验接口名称" align="center" prop="apiTemplateName" />
                    <el-table-column label="校验接口地址" align="center" prop="apiTemplateUrl" />
                  </el-table>

                  <pagination
                    v-show="formCheckTotal>0"
                    :total="formCheckTotal"
                    v-model:page="queryCheckFormParams.pageNum"
                    v-model:limit="queryCheckFormParams.pageSize"
                    @pagination="getSheetFormCheckList"
                  />
                </el-tab-pane>

                <el-tab-pane label="控件配置" name="third">
                  <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
                    <div class="search">
                      <el-row :gutter="10" class="mb8">
                        <el-col :span="1.5">
                          <el-button type="primary" plain icon="Plus" @click="handleButtonAdd" v-hasPermi="['system:sheetButton:add']">新增</el-button>
                        </el-col>
                        <el-col :span="1.5">
                          <el-button type="success" plain icon="Edit" @click="handleButtonAddOrUpdate()" v-hasPermi="['system:sheetButton:edit']">保存</el-button>
                        </el-col>
                        <el-col :span="1.5">
                          <el-button type="danger" plain icon="Delete" :disabled="multipleButton" @click="handleButtonDelete()" v-hasPermi="['system:sheetButton:remove']">删除</el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </transition>
                  <el-table v-loading="loading" :data="sheetButtonList" border @selection-change="handleButtonSelectionChange">
                    <el-table-column type="selection" width="55" align="center" />
                    <!--                <el-table-column label="sheetId" align="center" prop="sheetId" />-->
                    <el-table-column label="控件名称" align="center" prop="buttonId">
                      <template #default="scope">
                        <el-select v-model="scope.row.buttonId" filterable clearable @change="changeButtonId($event,scope.row)" placeholder="请选择数据源类型">
                          <el-option
                            v-for="item in buttonList"
                            :key="item.buttonId"
                            :label="item.name"
                            :value="item.buttonId"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="控件编码" align="center" prop="buttonCode" >
                      <template #default="scope">
                        <el-input v-model="scope.row.buttonCode" placeholder="请输入控件编码" />
                      </template>
                    </el-table-column>
                    <el-table-column label="显示名称" align="center" prop="showName">
                      <template #default="scope">
                        <el-input v-model="scope.row.showName" placeholder="请输入显示名称" />
                      </template>
                    </el-table-column>
                    <el-table-column label="控件图标" align="center" prop="buttonIcon" width="100">
                      <template #default="scope">
                        <el-input v-model="scope.row.buttonIcon" placeholder="请输入控件图标,参考Element-Plus图标库" />
                      </template>
                    </el-table-column>
                    <el-table-column label="显示分组" align="center" prop="showGroup">
                      <template #default="scope">
                        <el-input v-model="scope.row.showGroup" placeholder="请输入显示分组" />
                      </template>
                    </el-table-column>
                    <el-table-column label="是否启用" align="center" prop="status">
                      <template #default="scope">
                        <el-select v-model="scope.row.status" placeholder="请选择是否启用">
                          <el-option
                            v-for="dict in sys_yes_no"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="打开方式" align="center" prop="openType">
                      <template #default="scope">
                        <el-select v-model="scope.row.openType" placeholder="请选择打开方式">
                          <el-option
                            v-for="dict in sys_button_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="parseInt(dict.value)"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="显示位置" align="center" prop="showArea">
                      <template #default="scope">
                        <el-select v-model="scope.row.showArea" placeholder="请选择显示位置">
                          <el-option
                            v-for="dict in button_show_area"
                            :key="dict.value"
                            :label="dict.label"
                            :value="parseInt(dict.value)"
                          ></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="接口域名" align="center" prop="apiDomain" width="250px"/>
                    <el-table-column label="接口地址" align="center" prop="apiUrl">
                      <template #default="scope">
                        <el-input v-model="scope.row.apiUrl" placeholder="请输入接口地址" />
                      </template>
                    </el-table-column>
                    <el-table-column label="排序号" align="center" prop="sort">
                      <template #default="scope">
                        <el-input-number v-model="scope.row.sort" placeholder="请输入排序号" />
                      </template>
                    </el-table-column>
                    <!--                <el-table-column label="提示" align="center" prop="tip">
                                      <template #default="scope">
                                        <el-input v-model="scope.row.tip" placeholder="请输入提示" />
                                      </template>
                                    </el-table-column>-->
                  </el-table>
                </el-tab-pane>

                <el-tab-pane label="策略配置" name="four">
                  尚未实现
                </el-tab-pane>

              </el-tabs>

              <!-- 表单校验弹窗 -->
              <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body>
                <el-form ref="sheetFormCheckRef" :model="checkForm" :rules="checkRules" label-width="100px">
                  <el-form-item label="校验字段" prop="sheetFieldId">
                    <el-select v-model="checkForm.sheetFieldId" filterable @change="changeSheetFieldId" placeholder="请选择校验字段">
                      <el-option
                        v-for="item in sheetFieldListAll"
                        :key="item.sheetFieldId"
                        :label="item.chineseName"
                        :value="item.sheetFieldId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="校验类型" prop="checkType">
                    <el-select v-model="checkForm.checkType" placeholder="请选择校验类型">
                      <el-option
                        v-for="dict in form_check_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="最小长度" prop="minLength" v-if="checkForm.checkType == 2">
                    <el-input v-model="checkForm.minLength" placeholder="请输入最小长度" />
                  </el-form-item>
                  <el-form-item label="最大长度" prop="maxLength" v-if="checkForm.checkType == 2">
                    <el-input v-model="checkForm.maxLength" placeholder="请输入最大长度" />
                  </el-form-item>
                  <el-form-item label="正则表达式" prop="regular" v-if="checkForm.checkType == 3">
                    <el-input v-model="checkForm.regular" placeholder="请输入正则表达式" />
                  </el-form-item>
                  <el-form-item label="接口模板" prop="apiTemplateId" v-if="checkForm.checkType == 4">
                    <el-select v-model="checkForm.apiTemplateId" filterable @change="changeApiTemplateId" placeholder="请选择校验模板">
                      <el-option
                        v-for="item in checkTemplateList"
                        :key="item.checkTemplateId"
                        :label="item.name"
                        :value="item.checkTemplateId"
                      ></el-option>
                    </el-select>

                  </el-form-item>
                  <el-form-item label="错误提示" prop="errorMsg">
                    <el-input v-model="checkForm.errorMsg" placeholder="请输入错误提示" />
                  </el-form-item>
                </el-form>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button :loading="buttonLoading" type="primary" @click="submitFormCheck">确 定</el-button>
                    <el-button @click="cancelSearch">取 消</el-button>
                  </div>
                </template>
              </el-dialog>

            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>


  </div>
</template>

<script setup name="SheetFormDiy" lang="ts">

import {SheetFormVO} from "@/api/sheet/sheetForm/types";
import {listSheetForm} from "@/api/sheet/sheetForm";
import {TabsPaneContext} from "element-plus";
import {SheetFieldForm, SheetFieldQuery, SheetFieldVO} from "@/api/sheet/sheetField/types";
import {listSheetField, updateBatchSheetField, listSheetFieldAll} from "@/api/sheet/sheetField";
import {getSheetDataSourceBySheetId} from "@/api/sheet/sheetSource";
import {SheetSourceVO} from "@/api/sheet/sheetSource/types";
import {SheetButtonVO} from "@/api/sheet/sheetButton/types";
import {ButtonVO} from "@/api/sheet/button/types";
import {listAllButton} from "@/api/sheet/button";
import {addOrUpdateSheetButton, listAllSheetButton} from "@/api/sheet/sheetButton";
import {SheetFormCheckForm, SheetFormCheckVO} from "@/api/sheet/sheetFormCheck/types";
import {addSheetFormCheck,delSheetFormCheck,getSheetFormCheck,listSheetFormCheck,updateSheetFormCheck} from "@/api/sheet/sheetFormCheck";
import {listCheckTemplateAll} from "@/api/sheet/checkTemplate";
import {CheckTemplateVO} from "@/api/sheet/checkTemplate/types";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const route = useRoute();
const { field_show_type, data_source_type, sys_yes_no, table_field_type, button_show_area, sys_button_type, form_check_type } = toRefs<any>(proxy?.useDict('field_show_type', 'data_source_type', 'sys_yes_no', 'table_field_type', 'button_show_area', 'sys_button_type', 'form_check_type'));


/** 面板选中 */
const activeName = ref('first')
/** 表单搜索 */
const querySheetFormParams = reactive({
  name: undefined,
  pid: undefined,
})
/** 列表树loading */
const loadingSheetFormTree = ref(true);
/** 是否是否展开 */
const isExpandAll = ref(false)
/** 表单列表 */
const sheetFormList = ref<SheetFormVO[]>([]);
/** 字段列表配置 */
const initFormData: SheetFieldForm = {
  sheetFieldId: undefined,
  sheetId: undefined,
  fieldName: undefined,
  chineseName: undefined,
  fieldType: undefined,
  dataSourceType: undefined,
  dataSourceId: undefined,
  dataSourceName: undefined,
  formSort: undefined,
  tableSort: undefined,
  status: undefined,
  showTable: undefined,
  showForm: undefined,
  showType: undefined,
  remark: undefined,
  fieldTip: undefined
}
const data = reactive<PageData<SheetFieldForm, SheetFieldQuery>>({
  form: {...initFormData},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sheetId: undefined,
    fieldName: undefined,
    chineseName: undefined,
  },
  rules: {}
});
const { queryParams, form, rules } = toRefs(data);
const loading = ref(false);
const total = ref(0);
const sheetFieldList = ref<SheetFieldVO[]>([]);
const sheetFieldListAll = ref<SheetFieldVO[]>([]);
const queryFormRef = ref<ElFormInstance>();
/** 应用ID */
const sheetId = ref<any>("");
/** 表单ID */
const sheetFormId = ref<any>("");
/** 应用数据源数据 */
const sheetSourceList = ref<SheetSourceVO[]>([]);
/** 列表按钮配置 */
const sheetButtonList = ref<SheetButtonVO[]>([]);
/** 控件列表 */
const buttonList = ref<ButtonVO[]>([]);
const queryButtonParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: 'Y',
})
const querySheetButtonParams = reactive({
  pageNum: 1,
  pageSize: 10,
  bindId: undefined,
  showType: 1
})
const multipleButton = ref(true);
const delButtonIds = ref<Array<string | number>>([]);

/** 表单校验配置 */
const formCheckTotal = ref(0);
const initFormCheckData: SheetFormCheckForm = {
  sheetFormCheckId: undefined,
  formId: undefined,
  sheetFieldId: undefined,
  sheetFieldName: undefined,
  sheetField: undefined,
  checkType: undefined,
  errorMsg: undefined,
  minLength: undefined,
  maxLength: undefined,
  regular: undefined,
  apiTemplateId: undefined,
  apiTemplateName: undefined,
  apiTemplateUrl: undefined,
}
const formCheckData = reactive({
  checkForm: {...initFormCheckData},
  queryCheckFormParams: {
    pageNum: 1,
    pageSize: 10,
    sheetId: undefined
  },
  checkRules: {
    sheetFieldId: [
      { required: true, message: "请选择校验字段", trigger: "change" }
    ],
    checkType: [
      { required: true, message: "请选择校验类型", trigger: "change" }
    ],
    errorMsg: [
      { required: true, message: "错误提示不能为空", trigger: "blur" }
    ],
    maxLength: [
      { required: true, message: "最大长度不能为空", trigger: "blur" }
    ],
    minLength: [
      { required: true, message: "最小长度不能为空", trigger: "blur" }
    ],
    regular: [
      { required: true, message: "正则表达式不能为空", trigger: "blur" }
    ],
    apiTemplateId: [
      { required: true, message: "请选择校验模板", trigger: "change" }
    ],
  }
});
const {queryCheckFormParams, checkForm, checkRules} = toRefs(formCheckData);
const sheetFormCheckRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const sheetFormCheckList = ref<SheetFormCheckVO[]>([]);
const buttonLoading = ref(false);

/** 接口校验模板 */
const checkTemplateList = ref<CheckTemplateVO[]>([]);
const queryCheckTemplateParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: 'Y',
})

/** 获取应用列表树 */
const getSheetFormList = async () => {
  loadingSheetFormTree.value = true;

  querySheetFormParams.pid = undefined;
  const res = await listSheetForm(querySheetFormParams);
  console.info(res)
  const data = proxy?.handleTree<SheetFormVO>(res.data, "sheetFormId", "pid");
  if (data) {
    sheetFormList.value = data
  }
  loadingSheetFormTree.value = false;
}

/** 表单树树点击事件 */
const sheetFormRowClick = (row?: SheetFormVO) => {
  sheetId.value = row?.sheetId;
  sheetFormId.value = row?.sheetFormId;
  getList();
  getListAllSheetButton();
  getSheetFieldAllList();
  getSheetFormCheckList();
}

/** 面板切换事件 */
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

/** 查询应用字段列表 */
const getList = async () => {
  queryParams.value.sheetId = sheetId.value;
  loading.value = true;
  const res = await listSheetField(queryParams.value);
  sheetFieldList.value = res.rows;
  total.value = res.total;
  loading.value = false;

  await getSheetDataSource();
}

/** 获取所有应用字段 */
const getSheetFieldAllList = async () => {
  queryParams.value.sheetId = sheetId.value;
  const res = await listSheetFieldAll(queryParams.value);
  sheetFieldListAll.value = res.data;
}

/** 获取应用绑定的数据源 */
const getSheetDataSource = async () => {
  const res = await getSheetDataSourceBySheetId(sheetId.value);
  sheetSourceList.value = res.data;
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 数据源选择改变事件 */
const changeDataSourceId = (value: any, row: any)=>{
  sheetSourceList.value.forEach((item: any) => {
    if (item.sheetSourceId == value){
      row.dataSourceName = item.dataSourceName;
      row.dataSourceType = item.dataSourceType;
    }
  });
}

/** 清空数据源数据 */
const onClear = (value: any, row: any) =>{
  row.dataSourceName = "";
  row.dataSourceType = "";
}

/** 保存字段列表修改 */
const handleBatchEdit = async() => {
  if (sheetId.value == ''){
    proxy?.$modal.msgError("请先选择表单");
    return;
  }
  loading.value = true;
  await updateBatchSheetField(sheetFieldList.value);
  proxy?.$modal.msgSuccess("保存成功");
  loading.value = false;
  await getList();
}

/** 获取所有控件 */
const getListAllButton = async () => {
  const res = await listAllButton(queryButtonParams);
  buttonList.value = res.data;
}

/** 控件新增按钮 */
const random = (min:any,max:any) => Math.floor(Math.random() * (max - min + 1) + min)
const handleButtonAdd = () => {
  if (sheetId.value == ''){
    proxy?.$modal.msgError("请先选择表单");
    return;
  }
  sheetButtonList.value.push({
    sheetButtonId: '',
    bindId: sheetFormId.value,
    buttonId: '',
    buttonCode: '',
    buttonType: '',
    buttonIcon: '',
    showName: '',
    showGroup: '',
    showType: 1,
    openType: '',
    status: 'Y',
    showArea: '',
    apiDomain: '',
    apiUrl: '',
    showTip: '',
    sort: 0,
    random: random(0, 9999),
    isAuth: '',
    roleId: ''
  })
}

/** 选择控件改变事件 */
const changeButtonId = (value: any, row: SheetButtonVO) =>{
  console.info(row)
  buttonList.value.forEach((item: any) => {
    if (item.buttonId == value){
      row.buttonCode = item.code;
      row.showName = item.name;
      row.buttonType = item.style;
      row.apiDomain = item.apiDomain;
      row.apiUrl = item.apiUrl;
    }
  });
}

/** 搜索条件多选框选中数据 */
const handleButtonSelectionChange = (selection: SheetButtonVO[]) => {
  delButtonIds.value = [];
  selection.forEach(item => {
    if (item.sheetButtonId){
      delButtonIds.value.push(item.sheetButtonId)
    } else {
      delButtonIds.value.push(item.random)
    }
  })
  multipleButton.value = !selection.length;
}

/** 控件删除按钮 */
const handleButtonDelete = () => {
  console.info(delButtonIds)
  sheetButtonList.value.map((item,index)=>{
    delButtonIds.value.forEach(id =>{
      if(item.sheetButtonId == id || item.random == id){
        sheetButtonList.value.splice(index,1)
      }
    })
  })
}

/** 控件保存按钮 */
const handleButtonAddOrUpdate = async () => {
  loading.value = true;
  await addOrUpdateSheetButton(sheetButtonList.value);
  proxy?.$modal.msgSuccess("保存成功");
  loading.value = false;
  await getListAllSheetButton();
}

/** 获取所有应用控件 */
const getListAllSheetButton = async () => {
  querySheetButtonParams.bindId = sheetFormId.value;
  const res = await listAllSheetButton(querySheetButtonParams);
  sheetButtonList.value = res.data;
}

/** 添加校验配置表单重置 */
const resetFormCheck = () => {
  checkForm.value = {...initFormCheckData};
  sheetFormCheckRef.value?.resetFields();
}

/** 打开添加校验配置弹窗 */
const handleFormCheckAdd = async() => {
  resetFormCheck();
  if (sheetId.value == ''){
    proxy?.$modal.msgError("请先选择表单");
    return;
  }
  dialog.visible = true;
  dialog.title = "添加校验配置";
}

/** 字段改变事件 */
const changeSheetFieldId = (value: any) =>{
  sheetFieldList.value.forEach((item: any) => {
    if (item.sheetFieldId == value){
      checkForm.value.sheetFieldName = item.chineseName;
      checkForm.value.sheetField = item.fieldName;
    }
  });
}

/** 校验模板改变事件 */
const changeApiTemplateId = (value: any) =>{
  checkTemplateList.value.forEach((item: any) => {
    if (item.checkTemplateId == value){
      checkForm.value.apiTemplateName = item.name;
      checkForm.value.apiTemplateUrl = item.apiUrl;
    }
  });
}

/** 打开修改验配置弹窗 */
const handleFormCheckUpdate = async (row?: SheetFormCheckVO) => {
  resetFormCheck();
  const _sheetFormCheckId = row?.sheetFormCheckId || ids.value[0]
  const res = await getSheetFormCheck(_sheetFormCheckId);
  Object.assign(checkForm.value, res.data);
  dialog.visible = true;
  dialog.title = "修改搜索条件";
}

/** 删除搜索条件 */
const handleFormCheckDelete = async (row?: SheetFormCheckVO) => {
  const _sheetFormCheckIds = row?.sheetFormCheckId || ids.value;
  await proxy?.$modal.confirm('是否确认删除单校验编号为的数据项？').finally(() => loading.value = false);
  await delSheetFormCheck(_sheetFormCheckIds);
  proxy?.$modal.msgSuccess("删除成功");

  await getSheetFormCheckList();
}

/** 查询单校验列表 */
const getSheetFormCheckList = async () => {
  loading.value = true;
  const res = await listSheetFormCheck(queryCheckFormParams.value);
  sheetFormCheckList.value = res.rows;
  formCheckTotal.value = res.total;
  loading.value = false;
}

/** 取消按钮 */
const cancelSearch = () => {
  resetFormCheck();
  dialog.visible = false;
}

/** 表单校验多选框选中数据 */
const handleFormCheckSelectionChange= (selection: SheetFormCheckVO[]) => {
  ids.value = selection.map(item => item.sheetFormCheckId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 表单校验提交操作 */
const submitFormCheck = () => {
  sheetFormCheckRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      checkForm.value.formId = sheetFormId.value;
      if (checkForm.value.sheetFormCheckId) {
        await updateSheetFormCheck(checkForm.value).finally(() =>  buttonLoading.value = false);
      } else {
        await addSheetFormCheck(checkForm.value).finally(() =>  buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("保存成功");
      dialog.visible = false;
      await getSheetFormCheckList();
    }
  });
}

/** 查询校验模板维护列表 */
const getCheckTemplateList = async () => {
  const res = await listCheckTemplateAll(queryCheckTemplateParams);
  checkTemplateList.value = res.data;
}

onMounted(() => {
  getSheetFormList();
  getListAllButton();
  getCheckTemplateList();

  const sheetFormId = route.params && route.params.sheetFormId as string;
  console.info(222, sheetFormId)
});
</script>

